<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../index.js"></script>
    <style>
      ul {
        list-style-type: none;
      }
      .hasChild {
        position: relative;
      }
      .hasChild::before {
        display: inline-block;
        content: "\e722";
        position: absolute;
        left: -14px;
      }
    </style>
  </head>
  <body>
    <h3>树搜索</h3>
    <div>
      <input class="treeForm" name="treeForm" type="text" oninput="search()" />
      <div class="box">qqqqq</div>
    </div>
    <hr />
  </body>
  <script>
    let treeData = [
      {
        id: "24",
        parentId: "0",
        label: "2",
        children: [
          {
            id: "29",
            parentId: "24",
            label: "12",
          },
          {
            id: "25",
            parentId: "24",
            label: "3",
            children: [
              {
                id: "26",
                parentId: "25",
                label: "4",
              },
            ],
          },
        ],
      },
      {
        id: "21",
        parentId: "0",
        label: "1",
        children: [
          {
            id: "27",
            parentId: "21",
            label: "12",
          },
          {
            id: "22",
            parentId: "21",
            label: "11",
            children: [
              {
                id: "28",
                parentId: "22",
                label: "112",
              },
              {
                id: "23",
                parentId: "22",
                label: "111",
              },
            ],
          },
        ],
      },
    ];
    let treeDataOrigin = JSON.parse(JSON.stringify(treeData));
    let box = document.querySelector(".box");
    function render() {
      let ul = document.createElement("ul");
      let fn = (dom, array) => {
        for (let i = 0; i < array.length; i++) {
          let item = array[i];
          let li = document.createElement("li");
          li.textContent = item.label;
          li.setAttribute("data-id", item.id);
          if (item.children) {
            li.classList.add("hasChild");
            let ul = document.createElement("ul");
            li.appendChild(fn(ul, item.children));
          }
          dom.appendChild(li);
        }
        return dom;
      };
      let newUl = fn(ul, treeData);
      box.appendChild(newUl);
    }
    render();
    function search() {
      let dom = document.querySelector(".treeForm");
      // console.warn("dom.value", dom.value);
      import("../index.js").then(
        (modules) => {
          console.warn('modules',modules)
          treeData = modules.treeSearch(treeDataOrigin, dom.value);
          console.warn('treeData',treeData)
          if (box.firstElementChild) {
            box.removeChild(box.firstElementChild);
          }
          render();
        },
        (error) => {
          console.error("there was an error loading the script");
          throw error;
        }
      );
    }
  </script>
</html>
